<template>
	<view class="receive-page">
		<NavBar title="接收订单"/>
		<wd-form ref="formRef" :model="formData">
			<wd-cell required title="清单" title-width="40px" center>
				<view class="imgs">
					<image :src="img" class="img" v-for="img in imgUrl" :key="img"/>
					<view class="add" @tap="chooseImage">
						<wd-icon name="add" size="22px" color="#333"/>
					</view>
				</view>
			</wd-cell>
			<wd-cell required title="币种" title-width="40px" center>
				<wd-radio-group v-model="formData.currency" shape="dot" inline>
					<wd-radio value="1"> 人民币 </wd-radio>
					<wd-radio value="2"> 卢布 </wd-radio>
					<wd-radio value="3"> 美元 </wd-radio>
					<wd-radio value="4"> usdt </wd-radio>
				</wd-radio-group>
			</wd-cell>
			<wd-input
			  label="金额"
			  label-width="100px"
			  prop="money"
				type="number"
			  v-model="formData.money"
			  placeholder="请输入金额"
			  :rules="[{ required: true, message: '请填写金额' }]"
			/>
			<wd-cell title="备注" title-width="100px" prop="remark">
				<wd-textarea v-model="formData.remark" placeholder="请填写费用清单备注" />
			</wd-cell>
		</wd-form>
		<view class="btn-box justify-center">
			<wd-button class="btn" type="info" @tap="cancel"> 取 消 </wd-button>
			<wd-button class="btn" @tap="submit"> 确 认 </wd-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import { uploadApi, receiveApi } from '@/api'
	import { useUserStore } from '@/store'
	import { formatter } from '@/utils'
	const formRef = ref()
	const formData = ref({
		no: '',
		imgs: '',
		money: '',
		remark: '',
		currency: '1'
	})
	const imgId = ref([])
	const imgUrl = ref([])
	// 选择图片
	const chooseImage = () => {
		uploadApi().then(res => {
			const { data, status, message } = res
			if(status == 200) {
				imgId.value.push(data.id)
				imgUrl.value.push(data.url)
				formData.value.imgs = imgId.value.join(',')
			} else {
				uni.showToast({ icon: 'none', title: message })
			}
		})
	}
	const submit = () => {
		const { userInfo } = useUserStore()
		formRef.value.validate().then(({ valid }) => {
			if(valid) {
				const params = {
					uid: userInfo.uid,
					...formData.value
				}
				receiveApi(params).then(res => {
					uni.showToast({ icon: 'none', title: '提交成功' })
					uni.navigateBack()
				}).catch(err => uni.showToast({ icon: 'none', title: err.msg }))
			}
		})
	}
	const cancel = () => {
		uni.navigateBack()
	}
	onLoad((e) => {
		const { type, no } = e
		formData.value.no = no
	})
</script>

<style lang="scss" scoped>
	.receive-page {
		padding: 20rpx 24rpx;
		padding-bottom: 150rpx;
		.imgs {
			gap: 30rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			.img, .add {
				width: 100rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 20rpx;
			}
			.add {
				background-color: #eee;
			}
		}
	}
	.wd-textarea {
		padding: 10rpx;
		border-radius: 20rpx;
		border: 1px solid #f8f8f8;
	}
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		gap: 40rpx;
		padding: 20rpx 24rpx;
		background-color: #fff;
		.btn {
			flex: 1;
		}
	}
</style>
